<template>
	<Container>
		<view class="header">
			<view class="header-content" :style="{ background: 'url(' + assignment.background + ') 0 0 /100% 100%' }"><Article :articles="assignment.articles" /></view>
		</view>
		<Question :question="assignment.questionName" />
		<view class="articleBox">
			<view class="articleList" v-for="(item, index) in articles" :key="index">
				<view
					class="box"
					v-for="(article, aIndex) in item"
					@tap="tap(item, index, aIndex)"
					:key="aIndex"
					:class="{ success: touch[index] === aIndex, hidden: show[index] === aIndex, error: fails[index] === aIndex }"
				>
					<image class="item" mode="aspectFit" :src="article.imageUrl"></image>
					<SuccessIcon v-if="touch[index] === aIndex" />
					<text class="name">{{ article.name }}</text>
				</view>
			</view>
		</view>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Article from '../article.vue'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	data() {
		return {
			touch: [],
			success: [],
			fails: [],
			show: [],
			articles: []
		}
	},
	components: { Article, AudioIcon, Question, Container, SuccessIcon },
	mixins: [mixins],
	beforeMount() {
		this.articles = [[this.question.optionArticles[0], this.question.optionArticles[1]], [this.question.optionArticles[2], this.question.optionArticles[3]]]
	},
	methods: {
		tap: function(item, index, aIndex) {
			this.$set(this.touch, index, aIndex)
			const selectCount = this.touch.filter(item => {
				return item >= 0
			}).length
			if (selectCount === 2) {
				const bool = this.touch.every((item, index) => {
					return this.articles[index][item].isMatched
				})
				if (bool) {
					this.touch.map((item, index) => {
						this.$set(this.success, index, item)
						this.$set(this.show, index, item === 0 ? 1 : 0)
					})
					this.$parent.next({
						isSure: true
					})
				} else {
					this.touch.map((item, index) => {
						this.$set(this.touch, index, -1)
						this.$set(this.fails, index, item)
					})
					this.$parent.next()
				}
			} else {
				this.touchAudio()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 100%
	overflow hidden
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transform translate3d(0, 0, 0)
	position relative
	margin 5vh 0
	.header-content
		position absolute
		height 100%
		width 1080rpx
		left 50%
		top 50%
		transform translate3d(-50%, -50%, 0)
		z-index 98
.articleBox
	width 100%
	height 40vh
	display flex
	flex-wrap wrap
	justify-content center
	align-items center
	.articleList
		width 90%
		height 40%
		align-items center
		justify-content center
		display flex
		margin 2% 0
		background rgba(255, 190, 100, 0.3)
		border-radius 50rpx
		.box
			transition all 0.5s
			border 8rpx solid #FFC268
			border-radius 60rpx
			width 40%
			background white
			margin 0 20rpx
			max-width 25vh
			height 80%
			position relative
			flex-direction column
			align-items center
			display flex
			justify-content center
			.name
				position absolute
				bottom -50rpx
			.item
				height 80%
				width 70%
				filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
			.successIcon
				position absolute
				width 50rpx
				height 50rpx
				right -20rpx
				bottom -20rpx
</style>
